//初始化
var main = new Vue({
	el: '#main',
	data: {
		pageIndex: 1,
		gridList: [{
			icon: 'home',
			title: 'home1',
			url: 'a.html'
		}, {
			icon: 'email',
			title: 'email2',
			url: 'b.html'
		}, {
			icon: 'chatbubble',
			title: 'chat3',
			url: 'c.html'
		}, {
			icon: 'location',
			title: 'location4',
			url: 'd.html'
		}, {
			icon: 'search',
			title: 'search5',
			url: 'html/e.html'
		}, {
			icon: 'phone',
			title: 'phone6',
			url: 'e.html'
		}],
		mainList: []
	},
	ready: function() {
		//设置轮播
		var gallery = mui('.mui-slider');
		gallery.slider({
			interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
		});

		mui.init({
			pullRefresh: {
				container: '#refreshContainer',
				down: {
					callback: this.pulldownRefresh
				},
				up: {
					contentrefresh: '正在加载...',
					contentdown: '',
					contentnomore: '没有更多数据了',
					callback: this.pullupRefresh
				}
			}
		});
		if(mui.os.plus) {
			mui.plusReady(function() {
				setTimeout(function() {
					mui('#refreshContainer').pullRefresh().pullupLoading();
				}, 1000);
			});
		} else {
			mui.ready(function() {
				mui('#refreshContainer').pullRefresh().pullupLoading();
			});
		}
	},
	methods: {
		// 下拉刷新具体业务实现
		pulldownRefresh: function() {
			var self = this;
			setTimeout(function() {
				self.pageIndex = 1;
				console.log('下拉刷新');
				console.log('pageIndex = ' + self.pageIndex);
				
				for(var i = 0; i < 5; i++) {
					self.mainList.unshift({
						url: i + '.html',
						src: '../imgs/lazyload.gif',
						title: 'dowm' + i,
						descrition: '想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖'
					})
				}
				mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
			}, 1500);
		},
		// 上拉加载具体业务实现
		pullupRefresh: function() {
			var self = this;
			setTimeout(function() {
				//i++先赋值在累加,++i先累加在赋值
				self.pageIndex =++self.pageIndex;
				console.log('上拉加载更多');
				console.log('pageIndex = ' + self.pageIndex);
				
				mui('#refreshContainer').pullRefresh().endPullupToRefresh(); 
				for(var i = 0; i < 15; i++) {
					self.mainList.push({
						url: i + '.html',
						src: '../imgs/lazyload.gif',
						title: 'up' + i,
						descrition: '烤炉模式的城，到黄昏，如同打翻的调色盘一般'
					})
				}
			}, 1500);
		},
		gridListBtn: function(index) { //九宫格跳转
			var gridListBtnUrl = this.gridList[index].url;
			mui.openWindow({
				url: gridListBtnUrl,
				id: 'gridList',
				extras: {
					gridListBtnUrl: gridListBtnUrl,
				}
			});
			if(!mui.os.plus) {
				localStorage.setItem('gridListBtnUrl', gridListBtnUrl);
			}
		},
		mainListBtn: function(index) { //查看详情
			var subUrl = this.mainList[index].url;
			var subTitle = this.mainList[index].title;

			mui.openWindow({
				url: 'tab-webview-mian-detail.html',
				id: 'homesub',
				extras: {
					subUrl: subUrl,
					subTitle: subTitle
				}
			});
			if(!mui.os.plus) {
				localStorage.setItem('subUrl', subUrl);
				localStorage.setItem('subTitle', subTitle);
			}
		}
	}
});